<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <!--    <link th:href="@{/css/style.css}" rel="stylesheet"/>-->
    <link rel="stylesheet" type="text/css" href="/touchscreenstyle/css/bootstrap.min.css"/>
    <th:block th:include="include :: touchScreenHeader('公示公告')"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
</head>
<body>
<div class="header">
    <img id="sitefav" src="/touchscreenstyle/images/logo.png"/>
    <div class="time" id="clock">
        <p class="date">{{ date }}</p>
        <p class="time1">{{ time }}</p>
    </div>
</div>
<div class="main" id="main">
    <div id="mescroll" class="mescroll" style="margin-top: 20px;">
        <div>
            <div class="row clearfix con" style="margin: 0;">
                <div class="col-md-12 column">
                    <div class="row" id="content" style="margin: 0;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="weui_tabbar">
    <a href="/touchscreen/index" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-map"></i>
        </div>
        <p class="weui_tabbar_label">指引地图</p>
    </a>
    <a href="/touchscreen/jieshao" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-star-o"></i>
        </div>
        <p class="weui_tabbar_label">中心介绍</p>
    </a>
    <a href="/touchscreen/search" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-search"></i>
        </div>
        <p class="weui_tabbar_label">办件查询</p>
    </a>
    <a href="/touchscreen/nan" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-telegram"></i>
        </div>
        <p class="weui_tabbar_label">办事指南</p>
    </a>
    <a href="/touchscreen/notice" class="weui_tabbar_item weui_bar_item_on">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-list"></i>
        </div>
        <p class="weui_tabbar_label">公示公告</p>
    </a>
</div>
<th:block th:include="include :: touchScreenFooter"/>
<script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
<script>
    shijian();
    var prefix = "/touchscreen/notice";
    var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            callback: upCallback, //上拉加载的回调
            clearEmptyId: "content",
            //以下是一些常用的配置,当然不写也可以的.
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 6 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
            noMoreSize: 6, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            toTop: {
                //回到顶部按钮
                src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图
                offset: 1000 //列表滚动1000px才显示回到顶部按钮
            },
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId: "main", //父布局的id (1.3.5版本支持传入dom元素)
                // icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图
                tip: "暂无相关数据~" //提示
            },
            lazyLoad: {
                use: false, // 是否开启懒加载,默认false
                attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图  src='占位图''/>
            }
        }
    });

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.ajax({
            url: prefix + '/list?pageSize=6&pageNum=' + pageNum + '&orderByColumn=submitTime&isAsc=desc',
            method: 'post',
            success: function (data) {
                var curPageData = data.rows; // 接口返回的当前页数据列表
                if (data.total % 6 > 0) {
                    var totalPage = (data.total / 6) + 1;// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
                } else {
                    var totalPage = data.total / 6;
                }
                var totalSize = data.total; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
                var hasNext = totalSize > pageNum * 6; // 接口返回的是否有下一页 (true/false)

                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
                //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)

                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                //必传参数(当前页的数据个数, 总页数)
                // mescroll.endByPage(curPageData.length, totalPage);

                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                //必传参数(当前页的数据个数, 总数据量)
                mescroll.endBySize(curPageData.length, totalSize);
                //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                //必传参数(当前页的数据个数, 是否有下一页true/false)
                // mescroll.endSuccess(curPageData.length, hasNext);
                console.log(hasNext);
                if (curPageData != null) {
                    //设置列表数据
                    setListData(curPageData, true);//自行实现 TODO
                } else {
                    mescroll.endErr();
                }
                //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                //如果传了hasNext,则翻到第二页即可显示无更多数据.
                //mescroll.endSuccess(curPageData.length);

                //结束下拉刷新的 mescroll.endSuccess()无参.
                //结束上拉加载 curPageData.length必传的原因:
                //1.使配置的noMoreSize 和 empty生效
                //2.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
                //    比传入的totalPage, totalSize, hasNext具有更高的判断优先级
                //3.当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页
                //传totalPage, totalSize, hasNext主要目的是避免方法四描述的小问题
            },
            error: function (e) {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();
            }
        });
    }

    function setListData(data, isAppend) {
        for (var i = 0; i < data.length; i++) {
            var imgPath = data[i].imgPath;
            if (imgPath.length > 1) {
                imgPath = data[i].imgPath;
            } else {
                imgPath = "/touchscreenstyle/images/default_notice.png";
            }
            var str = " <a href='notice/" + data[i].tsNoticeId + "'><div class=\"col-md-4\">\n" +
                "                            <div class=\"thumbnail\">\n" +
                "                                <img alt=\"150*200\"\n" +
                "                                     src=\"" + imgPath + "\"/>\n" +
                "                                <div class=\"caption\">\n" +
                "                                    <h3>" + data[i].title + "</h3>\n" +
                "                                    <p>" + data[i].description + "</p>\n" +
                "                                </div>\n" +
                "                            </div>\n" +
                "                        </div></a>";
            $('#content').append(str);
        }
    }
</script>
</body>
</html>
